<!--
 * @Description: 一个针对主要业务的对话框
 * @Author: youzi
 * @Date: 2019-08-21 14:48:39
 * @LastEditors: youzi
 * @LastEditTime: 2019-10-21 16:40:51
 * @todo: 
 -->
<!-- 
  usage:
  import myModal from '~/tool/complex-modal';
  <my-modal
    ref="testModal"
    :visible="visible"
    @cancelHandler="cancelHandler"
  >
    <template v-slot:content>
      <h1>这是一个测试的content</h1>
    </template>
  </my-modal>
  cancelHandler() {
    this.visible = false;
  }
  在v-slot: content里写其他的组件
  按照目前样式，提供右上角的“X”，触发cancelHandler
  visible用于控制modal是否显示
 -->
<template>
  <div class="modal-wrapper">
    <a-modal
      centered
      closable
      v-model="realVisible"
      @cancel="cancel"
      :maskClosable="false"
      :footer="null"
      :bodyStyle="bodyStyle"
      :width="modalWidth"
      :destroyOnClose="true"
    >
      <slot name="content"></slot>
    </a-modal>
  </div>
</template>
<script>
export default {
  name: 'defaultModal',
  data() {
    return {
      modalWidth: 1160,
      bodyStyle: {
        padding: 0
      }
    };
  },
  computed: {
    realVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        return val;
      }
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    init() {},
    cancel() {
      // console.log('click cancel');
      this.$emit('cancelHandler');
    }
  }
};
</script>
